<template>
  <div v-if="visible" class="custom-modal">
    <div class="modal-overlay" @click="handleCancel"></div>
    <div class="modal-content">
      <div class="modal-header">
        <h3>资产总览列表</h3>
        <button class="close-btn" @click="handleCancel">×</button>
      </div>
      <div class="modal-body">
        <table class="custom-table">
          <thead>
            <tr>
              <th>资产编码</th>
              <th>资产名称</th>
              <th>资产类型</th>
              <th>资产地点</th>
              <th>资产状态</th>
              <th>负责人</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in dataList" :key="item.id">
              <td>{{ item.assetCode }}</td>
              <td>{{ item.assetName }}</td>
              <td>{{ item.type_dictText }}</td>
              <td>{{ item.place }}</td>
              <td>{{ item.status_dictText }}</td>
              <td>{{ item.chargePerson }}</td>
              <td>
                <button class="action-btn" @click="handleViewDetail(item)">查看</button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="modal-footer">
        <div class="pagination">
          <button :disabled="currentPage === 1" @click="changePage(currentPage - 1)">上一页</button>
          <span>第 {{ currentPage }} 页 / 共 {{ totalPages }} 页</span>
          <span>（共 {{ totalRecords }} 条记录）</span> <!-- 新增总记录数显示 -->
          <button :disabled="currentPage === totalPages" @click="changePage(currentPage + 1)">下一页</button>
        </div>
        <button class="cancel-btn" @click="handleCancel">关闭</button>
      </div>
    </div>

    <!-- AssetDetail 组件 -->
    <AssetDetail
      :visible="detailVisible"
      :assetDetail="selectedAsset"
      @close="detailVisible = false"
    />
  </div>
</template>

<script>
import { getAction } from '@/api/manage';
import AssetDetail from './AssetDetail';

export default {
  components: {
    AssetDetail
  },
  data() {
    return {
      dataList: [],
      visible: false,
      detailVisible: false, // 控制 AssetDetail 显示
      selectedAsset: {}, // 当前选中的资产详情
      currentPage: 1,
      pageSize: 5,
      totalPages: 0,
      selectParam: {},
      totalRecords: 0, // 总记录数
      url: ''
    };
  },
  methods: {
    show(url, selectParam) {
      this.selectParam = selectParam;
      this.url = url;
      this.currentPage = 1;
      this.dataList = [];

      this.loadData();
      this.visible = true;
    },
    loadData() {
      const params = { pageNo: this.currentPage, pageSize: this.pageSize };
      if (this.selectParam) {
        Object.assign(params, this.selectParam);
      }
      getAction(this.url, params).then((res) => {
        if (res.success) {
          this.dataList = res.result.records || res.result;
          this.totalPages = res.result.pages;
          this.totalRecords = res.result.total;
        } else {
          this.$message.warning(res.message);
        }
      });
    },
    handleCancel() {
      this.visible = false;
    },
    handleViewDetail(record) {
      this.selectedAsset = record; // 设置选中的资产详情
      this.detailVisible = true; // 打开详情弹窗
    },
    changePage(page) {
      this.currentPage = page;
      this.loadData();
    }
  }
};
</script>

<style scoped>
.custom-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
}

.modal-content {
  position: relative;
  background: #0a1f44;
  border: 1px solid #1e3a5f;
  border-radius: 8px;
  width: 1000px;
  max-height: 80vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.7);
}

.modal-header {
  background: #102a5c;
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #1e3a5f;
}

.modal-header h3 {
  color: #d4e1f5;
  margin: 0;
  font-size: 18px;
}

.close-btn {
  background: none;
  border: none;
  color: #8ba6d9;
  font-size: 20px;
  cursor: pointer;
}

.close-btn:hover {
  color: #fff;
}

.modal-body {
  padding: 16px;
  overflow-y: auto;
}

.custom-table {
  width: 100%;
  border-collapse: collapse;
  color: #d4e1f5;
}

.custom-table th,
.custom-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #1e3a5f;
}

.custom-table th {
  background: #102a5c;
  color: #a9c4e8;
}

.custom-table tr:hover {
  background: #1e3a5f;
}

.status {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
}

.status.normal {
  background: #4caf50;
  color: #fff;
}

.status.warning {
  background: #ff9800;
  color: #fff;
}

.action-btn {
  background: #165dff;
  color: #fff;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
}

.action-btn:hover {
  background: #4080ff;
}

.modal-footer {
  background: #102a5c;
  padding: 16px;
  border-top: 1px solid #1e3a5f;
  text-align: right;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pagination {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pagination button {
  background: #1e3a5f;
  border: 1px solid #2a4f7a;
  padding: 6px 12px;
  border-radius: 4px;
  color: #d4e1f5;
  cursor: pointer;
}

.pagination button:disabled {
  cursor: not-allowed;
  color: #8ba6d9;
  border-color: #2a4f7a;
}

.pagination button:hover:not(:disabled) {
  background: #2a4f7a;
}

.cancel-btn {
  background: #1e3a5f;
  color: #d4e1f5;
  border: 1px solid #2a4f7a;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
}

.cancel-btn:hover {
  background: #2a4f7a;
}
</style>